<!--
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-09-09 14:15:39
 * @LastEditTime: 2019-09-16 20:25:33
 * @LastEditors: Please set LastEditors
 -->
<template>

  <div class="login-wrap">
    <div class="login-box">
      <h3 class="title">
        辰安消防服务机构
        <br>
        <span>欢迎您</span>
      </h3>

      <div class="item user-item">
        <van-cell-group>
          <van-field v-model="phone"
                     clearable
                     left-icon="contact"
                     placeholder="请输入账号" />
        </van-cell-group>
      </div>
      <div class="item password-item">
        <van-cell-group>
          <van-field v-model="password"
                     v-if="YZMLoginShow"
                     type="password"
                     placeholder="请输入密码"
                     left-icon="contact"
                     id="loginPassWord" />
          <van-field v-model="verificationCode"
                     v-if="getYZMShow"
                     type="text"
                     placeholder="请输入验证码"
                     left-icon="contact"
                     id="loginPassWord" />
        </van-cell-group>

        <a class="getYZM"
           @click="getYZM"
           v-if="getYZMShow">获取验证码</a>
      </div>
      <div class="item item-bottom">
        <span @click="YZMLogin"
              v-if="YZMLoginShow">验证码登录</span>
        <span @click="passwordLogin"
              v-if="passwordLoginShow">密码登录</span>
        <span @click="forget"
              v-if="forgetShow">忘记密码？</span>
      </div>
      <button class="loginBtn"
              @click="login()">登 录</button>
    </div>
    <!-- //<router-view /> -->
  </div>

</template>


<script>
import { mapState } from 'vuex'
import { Notify } from 'vant';
export default {
  data () {
    return {
      openId: "a112",
      phone: "",
      password: "",
      verificationCode: "",
      getYZMShow: false,//获取验证码
      forgetShow: true,//忘记密码
      passwordLoginShow: false,//密码登录
      YZMLoginShow: true,//验证码登录
      passwords: "请输入密码"
    }
  },
  mounted () {
    let that = this;
    localStorage.setItem("openId", JSON.stringify(this.openId));
    this.$http.post('getOpenId', { code: "222" }).then((res) => {
      alert('mounted--openId--' + JSON.stringify(res.data))
    })
    setTimeout(function () { that.jumplogin() }, 2000);


  },


  methods: {
    login () {
      let that = this;
      if (this.getYZMShow) {
        this.verCodeByPublicAgencyAccount(this.phone, this.verificationCode);
      } else {
        this.pwdLoginByPublicAgencyAccount(this.phone, this.password);
      }



    },

    jumplogin () { // 非静默授权，第一次有弹框
      const code = this.getUrlParam('code') // 截取路径中的code，如果没有就去微信授权，如果已经获取到了就直接传code给后台获取openId
      const local = window.location.href
      if (code == null || code === '') {
        window.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx813df6a9182864d5&redirect_uri=' + encodeURIComponent(local) + '&response_type=code&scope=snsapi_base&state=1#wechat_redirect'
      } else {
        this.getOpenId(code) //把code传给后台获取用户信息
      }
    },
    getUrlParam (name) {
      var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
      var r = window.location.search.substr(1).match(reg);  //匹配目标参数
      if (r != null) return unescape(r[2]); return null; //返回参数值
    },
    //授权 获取code值

    getOpenId (code) { // 通过code获取 openId等用户信息，/api/user/wechat/login 为后台接口
      alert("getOpenI-Start");
      alert(code);
      let that = this;
      that.$http.post('getOpenId', { code: code }).then((res) => {
        alert("start");
        alert("getOpenId--" + JSON.stringify(res));
        alert("getOpenI-end");
        // if (res.data.data.code === "success") {

        //   if (that.getYZMShow) {
        //     that.verCodeByPublicAgencyAccount(that.phone, that.verificationCode);
        //   } else {
        //     that.pwdLoginByPublicAgencyAccount(that.phone, that.password);
        //   }
        // }
      }).catch((error) => {
        alert(JSON.stringify(error))
      })
    },
    //验证码登录
    YZMLogin () {
      this.YZMLoginShow = false; //是否显示验证码
      this.getYZMShow = true;
      this.forgetShow = false;
      this.passwordLoginShow = true;
      this.phone = "";
      this.password = ""
      this.passwords = "请输入6位验证码"
    },
    //找回密码
    forget () {
      this.$router.push({ name: 'findPassWord', params: { type: "1" } })
    },

    //账号密码登录
    pwdLoginByPublicAgencyAccount (phone, password) {
      let params = {
        phone: phone,
        password: password,
        openId: this.openId
      }
      this.$http.post("pwdLoginByPublicAgencyAccount", params).then((res) => {
        if (res.data.code == "success") {
          this.$router.push({ name: 'home' });
          localStorage.setItem("user", JSON.stringify(res.data.data));
        } else {
          Notify({ type: 'danger', message: res.data.message });
        }
      }).catch(function (error) {
        console.log(error);
      });
    },

    //获取验证码
    getYZM () {
      let params1 = {
        phone: this.phone
      }
      this.$http.post("getPublicAgencyAccountverificationCode", params1).then((res) => {
        if (res.data.code == "success") {

        } else {

        }
      }).catch(function (error) {
        console.log(error);
      });

    },

    //密码登录
    passwordLogin () {
      this.YZMLoginShow = true; //是否显示验证码
      this.getYZMShow = false;
      this.forgetShow = true;
      this.passwordLoginShow = false;
      this.phone = "";
      this.password = ""
      this.passwords = "请输入密码"
    },

    //验证码登录
    verCodeByPublicAgencyAccount (phone, verificationCode) {
      const that = this;
      let params = {
        phone: phone,
        verificationCode: verificationCode,
        openId: that.openId
      };
      that.$http.post("verCodeByPublicAgencyAccount", params).then((res) => {
        if (res.data.code == "success") {
          that.$router.push({ name: 'home' });
          localStorage.setItem("user", JSON.stringify(res.data.data));

        } else {
          Notify({ type: 'danger', message: res.data.message });
        }
      }).catch(function (error) {
        console.log(error);
      });
    }
  },

}


</script>




<style lang="scss">
@import "@/assets/css/common.scss";
[class*="van-hairline"]::after {
  top: auto;
  bottom: 0;
}
.login-wrap {
  input::-webkit-input-placeholder {
    /* webkit内核的浏览器，如谷歌，edge */
    color: #595959;
  }

  position: fixed;
  width: 100%;
  height: 100%;
  background: url("../../assets/img/login/bg1.png") center bottom no-repeat;
  background-size: contain;
  .login-box {
    width: 80%;
    margin: 3rem auto;
    .title {
      color: #222;
      text-align: left;
      font-size: 0.8rem;
      line-height: 1.1;
      span {
        font-size: 0.45rem;
      }
    }
    .item {
      position: relative;
      .van-cell {
        align-items: center;
        .van-field__left-icon .van-icon {
          width: 0.48rem;
          height: 0.48rem;
          margin-right: 0.1rem;

          &:before {
            content: "";
          }
        }
        .van-field__control {
          font-size: 0.42rem;
        }
      }
      &.user-item {
        .van-field__left-icon .van-icon {
          background: url("../../assets/img/user.png") center no-repeat;
          background-size: cover;
        }
      }
      &.password-item {
        .van-field__left-icon .van-icon {
          background: url("../../assets/img/lock.png") center no-repeat;
          background-size: cover;
        }
      }
      &.item-bottom {
        display: flex;
        justify-content: space-between;
        margin: 0.5rem 0;
        font-size: 0.38rem;
        color: #808080;
      }
      .getYZM {
        position: absolute;
        right: 5px;
        top: 12px;
        color: $theme-color;
        font-size: 12px;
      }
    }
    .van-field__label {
      display: none;
    }
  }
  .loginBtn {
    background: $theme-color;
    width: 100%;
    height: 1.2rem;
    line-height: 1.2rem;
    border: 0 none;
    border-radius: 0.5rem;
    font-size: 0.5rem;
    font-weight: bold;
    position: relative;
    top: 0.8rem;
  }
}
</style>